<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航条</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.dropbtn {
				background-color: blanchedalmond;
				color: rgb(253, 138, 158);
				padding: 16px;
				font-size: 15px;
				border: none;
				cursor: pointer;
				width: 160px;
			}

			.dropdown {
				position: relative;
				display: inline-block;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				text-align: center;
			}

			.dropdown-content a:hover {
				background-color: #55aaff;
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}

			.dropdown:hover .dropbtn {
				background-color: antiquewhite;
			}

			.main-menu {
				background-color: blanchedalmond;
				height: 90px;
				width: 1700px;
				margin: 0;
			}

			.menu-list {
				margin-left: 350px;
				margin-top: -35px;
			}

			.logo {
				/* background-color: #0000FF; */
				line-height: 55px;
				width: 170px;
				padding-left: 10px;
			}

			.content {
				background: url(../img/2.png);
				height: 700px;
				width: 1700px;
				margin-left: 0;
			}

		
		</style>
	</head>
	<body>
		<div class="main-menu">
			<div class="logo">
				<p>叽叽喳喳</p>
			</div>
			<div class="menu-list">
				<div class="dropdown">
					<button class="dropbtn">首页</button>
				</div>
				<div class="dropdown">
					<button class="dropbtn">轻音少女</button>
					<div class="dropdown-content">
						<a href="#">田井中律</a>
						<a href="#">秋山澪</a>
						<a href="#">琴吹紬</a>
						<a href="#">平泽唯</a>
						<a href="#">中野梓</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">lovelive</button>
					<div class="dropdown-content">
						<a href="#">上原梦步</a>
						<a href="#">天王寺璃奈</a>
						<a href="#">优木雪莱</a>
						<a href="#">钟岚珠</a>
						<a href="#">朝香果林</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">小林家的龙女仆</button>
					<div class="dropdown-content">
						<a href="#">小林</a>
						<a href="#">托尔</a>
						<a href="#">康娜卡姆依</a>
						<a href="#">伊露露</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">好想告诉你</button>
					<div class="dropdown-content">
						<a href="#">黑沼爽子</a>
						<a href="#">风早翔太</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">中二病也要谈恋爱</button>
					<div class="dropdown-content">
						<a href="#">小鸟游六花</a>
						<a href="#">富樫勇太</a>

					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">总之就是非常可爱</button>
					<div class="dropdown-content">
						<a href="#">由崎星空</a>
						<a href="#">由崎司</a>
					</div>
				</div>
			</div>
		</div>
		<div class="content"></div>
	</body>
</html>

